<template>
    <section>
        <div class="middles">
            <!--第一行-->
            <el-row>
                <el-col :span="4" v-for="(coursedatas, index) in coursedatas" :key="coursedatas"
                        :offset="index > 0 ? 2 : 0">
                    <el-card :body-style="{ padding: '0px' }">
                        <img class="image" src="/static/img/study.png">
                        <div style="padding: 14px;">
                            <el-row>

                                <el-col :span="6" :offset="5">
                                    <div class="bottom clearfix">
                                        <template v-if="coursedatas.course === '学习课程'">

                                            <el-button type="text" class="button" @click.native="select()">
                                                {{ coursedatas.course}}
                                            </el-button>
                                        </template>
                                        <template v-if="coursedatas.course === '章节测验'">

                                            <el-button type="text" class="button" @click.native="selectsection()">
                                                {{ coursedatas.course}}
                                            </el-button>
                                        </template>
                                        <template v-if="coursedatas.course === '资源下载'">
                                            <el-button type="text" class="button" @click.native="studyResource()">
                                                {{ coursedatas.course}}
                                            </el-button>
                                        </template>

                                    </div>
                                </el-col>

                            </el-row>
                        </div>
                    </el-card>
                </el-col>

            </el-row>
            <!--第二行-->
            <el-row>
                <el-col :span="4" v-for="(teacherInfo, index) in teacherInfos" :key="teacherInfo"
                        :offset="index > 0 ? 2 : 0">
                    <el-card :body-style="{ padding: '0px' }">
                        <img class="image" src="/static/img/study.png">
                        <div style="padding: 14px;">

                            <el-row>
                                <div class="bottom clearfix">
                                    <el-col :span="6" :offset="5">
                                        <template v-if="teacherInfo === '教师信息'">

                                            <el-button type="text" class="button" @click.native="teach_info()">
                                                {{ teacherInfo}}
                                            </el-button>
                                        </template>
                                        <template v-if="teacherInfo === '课程评价'">

                                            <el-button type="text" class="button" @click.native="handleAdd()">
                                                {{ teacherInfo}}
                                            </el-button>
                                        </template>

                                        <template v-if="teacherInfo === '教学公告'">

                                            <el-button type="text" class="button" @click.native="notice()">
                                                {{ teacherInfo}}
                                            </el-button>
                                        </template>


                                    </el-col>
                                </div>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>

            </el-row>

        </div>

        <!--课程评价界面-->
        <el-dialog title="课程评价" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="addFormRules" ref="addForm">
                <el-form-item label="课程名称" prop="courseId">
                    <el-select v-model="addForm.courseId" placeholder="请选择课程">
                        <el-option v-for="item in addForm.courses" :key="item.courseId" :label="item.courseName"
                                   :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="个人评价" prop="contents">
                    <el-input type="textarea" v-model="addForm.contents" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">评价</el-button>
            </div>
        </el-dialog>

        <!--课程学习界面-->
        <el-dialog title="课程选择" v-model="courseFormVisible" :close-on-click-modal="false">
            <el-form :model="courseForm" ref="courseForm" label-width="100px">
                <el-form-item label="课程名称" prop="courseId">
                    <el-select v-model="courseForm.courseId" placeholder="请选择课程">
                        <el-option v-for="item in courseForm.courses" :key="item.courseId" :label="item.courseName"
                                   :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="courseFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="stu_course()" :loading="addLoading">确定</el-button>
            </div>
        </el-dialog>
        <!--考试-->
        <el-dialog title="课程选择" v-model="sectionFormVisible" :close-on-click-modal="false">
            <el-form :model="sectionForm" ref="sectionForm" label-width="100px">
                <el-form-item label="课程名称" prop="courseId">
                    <el-select v-model="sectionForm.courseId" placeholder="请选择课程">
                        <el-option v-for="item in sectionForm.courses" :key="item.courseId" :label="item.courseName"
                                   :value="item.courseId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="sectionFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="sectionTest()" :loading="addLoading">确定</el-button>
            </div>
        </el-dialog>


    </section>
</template>
<style>
    .middles {
        margin-top: 30px;
        margin-left: 300px;
        float: left;
    }

    .bottom {

        line-height: 12px;
    }

    .button {
        padding: 0;
        font-size: 20px;
        margin: 0 30%;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>

<script>
    import {getUserListPage, removeUser, batchRemoveUser, editUser, addEvaluate, selectCourse} from '../../api/api';

    export default {
        data() {

            return {
                coursedatas: [{course: '学习课程'}, {course: '章节测验'}, {course: '资源下载'}],
                teacherInfos: ['教师信息', '课程评价', '教学公告'],

                addFormVisible: false,//课程评价界面是否显示
                addLoading: false,
                addFormRules: {
                    contents: [
                        {required: true, message: '请输入评价内容', trigger: 'blur'}
                    ]
                },

                courseFormVisible: false,
                sectionFormVisible: false,
                //课程评价界面数据
                addForm: {
                    contents: '',
                    courseName: '',
                    courseId: '',
                    courses: []
                },
                courseForm: {
                    courseId: '',
                    courseName: '',
                    courses: []

                },
                sectionForm: {
                    courseId: '',
                    courseName: '',
                    courses: []

                }

            };
        },
        methods: {
            //获取用户列表
            getUsers() {
                let para = {
                    page: this.page,
                    name: this.filters.name

                };
                this.listLoading = true;
                //NProgress.start();
                getUserListPage(para).then((res) => {
                    this.total = res.data.total;
                    this.users = res.data.users;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },

            //显示课程评价界面
            handleAdd: function () {
                selectCourse().then((res) => {
                    if (res.resCode == 0) {
                        this.addForm.courses = res.resData;
                    }
                });
                this.addFormVisible = true;
            },
            //选择课程
            select: function () {
                selectCourse().then((res) => {
                    if (res.resCode == 0) {
                        this.courseForm.courses = res.resData;
                    }
                });
                this.courseFormVisible = true;
            },
            selectsection: function () {
                selectCourse().then((res) => {
                    if (res.resCode == 0) {
                        this.sectionForm.courses = res.resData;
                    }
                });
                this.sectionFormVisible = true;
            },
            //课程评价
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        //NProgress.start();
                        //let para = Object.assign({}, this.addForm);
                        //para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
                        if (this.addForm.courseId === "") {
                            this.$message({
                                message: '请选择课程',
                                type: 'warning'
                            });
                        } else {
                            let para = {
                                courseId: this.addForm.courseId,
                                classEvaluateContent: this.addForm.contents
                            }
                            addEvaluate(para).then((res) => {
                                this.addLoading = false;
                                //NProgress.done();
                                if (res.resCode == 0) {

                                    this.$message({
                                        message: '评价成功',
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                } else {
                                    this.$message({

                                        message: '评价失败',
                                        type: 'error'
                                    });
                                    this.$refs['addForm'].resetFields();
                                }

                                this.addFormVisible = false;
                                //this.getUsers();
                            });
                        }
                    }
                });
            },


            //学习课程
            stu_course() {
                if (this.courseForm.courseId === "") {
                    this.$message({
                        message: '请选择课程',
                        type: 'warning'
                    });
                } else {
                    this.$router.push({
                        name: '学习课程',
                        path: '/stu_course',
                        query: {courseId: this.courseForm.courseId}
                    }); //跳转到另一个vue页面
                }

            },
            //章节测试
            sectionTest() {
                if (this.sectionForm.courseId === "") {
                    this.$message({
                        message: '请选择课程',
                        type: 'warning'
                    });
                } else {
                    this.$router.push({
                        name: '章节测试',
                        path: '/sectionTest',
                        query: {courseId: this.sectionForm.courseId}
                    }); //跳转到另一个vue页面
                }

            },
            //教师信息
            teach_info(row) {
                console.log(this.$route.query.courseId)
                this.$router.push({name: '教师信息', path: '/teach_info', query: {courseId: this.$route.query.courseId}}); //跳转到另一个vue页面
            },
            //章节测试
            section_test(row) {
                console.log(this.$route.query.courseId)
                this.$router.push({name: '章节测试', path: '/sectionTest', query: {courseId: this.$route.query.courseId}}); //跳转到另一个vue页面
            },
            //教学公告
            notice(row) {

                this.$router.push({
                    name: '教学公告',
                    path: '/course_notice',
                    query: {courseId: this.$route.query.courseId}
                }); //跳转到另一个vue页面
            },
            //资源下
            studyResource(row) {

                this.$router.push({
                    name: '资源下载',
                    path: '/studyResource',
                    query: {courseId: this.$route.query.courseId}
                }); //跳转到另一个vue页面
            }

        }
    }
</script>